let form = layui.form;
let layer = layui.layer;

// =====================获取类别==============
axios.get("/my/article/cates")
    .then(({ data: { data } }) => {
        console.log(data)
        let newAll = data.map((item) => {
            return `
            <option value="${item.Id}">${item.name}</option>
           `
        }).join('')
        $('[name="cate_id"]').append(newAll)

        // 当option创建添加到下拉框之后，手动更新form表单全部内容
        form.render('select');
    })


// ===================== 富文本编辑器 ==============
const E = window.wangEditor
const editor = new E("#contentBox")
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 1
editor.create()


// ===================== 图片剪辑器 ==============
// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 400 / 280,
    // 指定预览区域
    preview: ".preview"
};

// 1.3 创建裁剪区域
$image.cropper(options);
// =============================  点击上传, 可以选择图片  =============================
$('#btnChooseCoverImage').click(function () {
    $('#fileCover').click();
});
$('#fileCover').change(function () {
    // 获取到用户选择的文件
    const file = this.files[0]
    console.log(file);
    if (!file) {
        return layer.msg('请选择文件')
    }
    const newSrc = URL.createObjectURL(file)
    console.log(newSrc);



    $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', newSrc)  // 重新设置图片路径
        .cropper({
            // 纵横比
            aspectRatio: 400 / 280,
            // 指定预览区域
            preview: ".preview"
        })        // 重新初始化裁剪区域

});


// ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
$('#btnCreateAvatar').click(function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
    console.log(dataURL);







    // axios
    //     .post("/my/update/avatar", `avatar=${encodeURIComponent(dataURL)} `)
    //     .then((res) => {
    //         // 提示
    //         if (res.data.status !== 0) {
    //             // 失败
    //             return layer.msg("更新头像失败");
    //         }

    //         layer.msg("更新头像成功");
    //         // 页面中的头像发生变化（更新）
    //         window.parent.getUserInfo();
    //     });
});

// =============================  状态是以点击的按钮来确认的  =============================
let state
$('#btnPublish').click(function () {
    state = '发布'
})
$('#btnSave').click(function () {
    state = '存为草稿'
})




// =============================  点击提交数据  =============================
$('#form').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    fd.forEach(value => console.log(value));

    //对于FormData!收集不到的数据，可以使用append方法进行追加
    //语法：fd.append(name,value);


    //收集富文本编辑器内容
    console.log(editor.txt.html());
    fd.append("content", editor.txt.html());


    // 追加状态
    fd.append("state", state);

    console.log('状态', state);

    // /不是必备的代码=>做个检测
    // fd.forEach((value, name) = console.log(value, name));




    $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        })
        .toBlob(function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据

            fd.append("cover_img", blob);




            axios.post("/my/article/add", fd)
                .then(({data:{status,message}}) => {
                    // console.log(res)
                    if (status !== 0) {
                        return layer.msg(message)
                    }
                    layer.msg(message, {

                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        //do something
                        location.href = '/article/art_list.html'
                    });
        

                })
           

        })


})




